<template>
    <div class="main_pane">
        <div class="login_pane">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="账号">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" type="password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
 import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive } from 'vue';
 import { useRouter } from 'vue-router'
import { authApi } from '@/api/apis/system'

    const router = useRouter()
    
    const form =  ref({
        username: 'user_1',
        password: '123456'
    })
 
    const onSubmit = ()=> {
        console.log('submit!'+form.value)
        const formData = new FormData()
        formData.append('username', form.value.username);
        formData.append('password', form.value.password);
        formData.append('grant_type', 'password');
        formData.append('scope', 'all');
        formData.append('client_id', 'wuzzClientId');
        formData.append('client_secret', 'wuzzSecret');
        formData.append('code', '123456');

        authApi.login(formData).then((res)=>{
            console.log(res);
            // 只检查对象自身属性，不检查原型链
            if (res.hasOwnProperty('access_token')) {
                  // 保存 access_token
                localStorage.setItem('access_token', res.access_token);
                localStorage.setItem('refresh_token',res.refresh_token);
                router.push('/console');
            } else {
            
            }
        })
    }

</script>
<style lang="css" scoped>
.main_pane{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    .login_pane{
          width: 50%;
          height: 50%;
    }
}
</style>